<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="800"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <div>
      <yt-crud
        v-bind="options"
        ref="crudRef"
        @onLoad="getData"
        :fun-props="{
          exportBtn: false,
          delBtn: false,
        }"
        :table-props="{
        selection: false,
          delBtn: true,
          pageHide: true,
          viewBtn: false,
          editBtn: true,
        }"
        :form-props="{
          loading: state.form.loading,
          width: 500,
        }"
        :loading="state.loading"
        :total="state.total"
        v-model:page="state.page"
        v-model:query="state.query"
        @delFun="handleDelete"
        @saveFun="onSave"
        @openBeforeFun="openBeforeFun"
        @change="onChange"
      >
        <template #rightToolbar></template>

        <template #status="scope:any">
          <DictTag :options="EnableStatusEnum" :value="scope.row.status" />
        </template>
        <template #menuSlot></template>
      </yt-crud>
    </div>

    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import YtCrud from '@/components/common/yt-crud.vue'
import {IColumn} from '@/components/common/types/tableCommon'

import {
  batchRemove as rechargeBatchRemove,
  list as rechargeItemList,
  remove as rechargeItemRemove,
  save as rechargeItemSave
} from '@/api/business/rechargeItem'
import {ComponentInternalInstance} from 'vue'
import {useI18n} from 'vue-i18n'
const { t } = useI18n()

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { EnableStatusEnum } = toRefs<any>(proxy?.useEnum('enable_status_enum'))

const state = reactive({
  visible: false,
  loading: false,
  recharge: {},
  form: {
    loading: false,
  },
  title: '充值金额',
  page: {
    pageSize: 30,
    pageNum: 1,
  },
  total: 0,
  query: {},
})

const recharge = ref<any>({})

//字典
const column = ref<IColumn[]>()

const openDialog = (row?: any) => {
  recharge.value = row
  state.visible = true

  column.value = [
    {
      label: t('business.rechargeItem.amount'),
      key: 'amount',
      type: 'number',
      rules: [{ required: true, message: t('business.rechargeItem.validator.amount') }],
      search: false,
      formHide: false,
      slot: false,
      componentProps: {
        min: 0.01,
        max: 10000,
        step: 10,
        precision: 2,
        style: {
          width: '100%'
        }
      },
    },
    {
      label: t('business.rechargeItem.discount'),
      key: 'discount',
      type: 'number',
      rules: [{ required: true, message: t('business.rechargeItem.validator.discount') }],
      search: false,
      hide: recharge.value.type !== 'Quota',
      formHide: recharge.value.type !== 'Quota',
      componentProps: {
        min: 0.01,
        max: 1.00,
        step: 0.1,
        precision: 2,
        style: {
          width: '100%'
        }
      },
      slot: false,
    },
    {
      label: t('business.rechargeItem.give'),
      key: 'give',
      type: 'number',
      rules: [{ required: true, message: t('business.rechargeItem.validator.give') }],
      search: false,
      hide: recharge.value.type !== 'Give',
      formHide: recharge.value.type !== 'Give',
      slot: false,
      componentProps: {
        min: 1,
        max: 100,
        step: 1,
        precision: 0,
        style: {
          width: '100%'
        }
      },
    },
    {
      label: t('business.rechargeItem.minus'),
      key: 'minus',
      type: 'number',
      rules: [{ required: true, message: t('business.rechargeItem.validator.minus') }],
      search: false,
      hide: recharge.value.type !== 'Minus',
      formHide: recharge.value.type !== 'Minus',
      slot: false,
      componentProps: {
        min: 1,
        max: 100,
        step: 1,
        precision: 0,
        style: {
          width: '100%'
        }
      },
    },
    {
      label: t('crud.table.column.note'),
      key: 'note',
      hide: true,
      formHide: false,
      colSpan: 22,
      componentProps: {
        type: 'textarea',
        rows: 5,
      }
    },
    {
      label: t('crud.table.column.createTime'),
      key: 'createTime',
      tableWidth: 180,
      sortable: true,
      type: 'date',
      formHide: true,
    },
  ]
}

const handleClose = () => {
  state.visible = false
}


const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})

const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  rechargeItemList({
    ...state.page,
    ...state.query,
    ...{ rechargeId: recharge.value.id}
  })
    .then((res) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}


// 保存数据
const onSave = async ({ data, cancel }: any) => {
  state.loading = true

  await rechargeItemSave(toRaw(data))
  state.loading = false
  ElMessage.success(t('operate.tooltip.success'))
  cancel()
  getData()
}

// 弹窗前置操作
const openBeforeFun = ({ type, data }) => {
  if (type === 'add') {
    data.rechargeId = recharge.value.id
  } else if (type === 'update') { /* empty */ }
}

// 删除
const handleDelete = async (row: any) => {
  state.loading = true
  if (row instanceof Array) {
    await rechargeBatchRemove(row.map((m) => m.id))
  } else {
    await rechargeItemRemove(row.id)
  }
  ElMessage.success(t('operate.tooltip.success'))
  state.loading = false
  getData()
}

const multipleSelection = ref<{ deviceId: string }[]>([])

const onChange = (data) => {
  multipleSelection.value = data
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>
